<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="redis" uri="http://www.shopjsp.com/redisTag/functions" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${redis:getSysConfig('base_path_back')}"/>
<c:set var="srcPath" value="${redis:getSysConfig('sysFileVisitRoot_back')}"/>
<script type="text/javascript" src="${basePath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="${basePath}/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="${basePath}/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="${srcPath}/common/js/common.js"></script>

<script type="text/javascript">
    /**
     * 自定义验证规则
     */
    function validateForm(){
        form.bootstrapValidator({
            message: "无效的值",
            feedbackIcons: {
                valid: "glyphicon glyphicon-ok",
                invalid: "glyphicon glyphicon-remove",
                validating: "glyphicon glyphicon-refresh"
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {message: "属性名称不可为空"},
                        stringLength: {max: 50,message: "属性名称最大长度为50"},
                        threshold :  1 ,
                        /**bootstrap validator 远程校验需要返回{"valid",true or false}**/
                        remote: {
                            url:'${basePath}/back/productAttribute/checkName.sjson',
                            message:  '参数已存在',
                            delay:  2000,
                            type:  'POST',
                            data: function(validator) {
                                return {
                                    name:$("#name").val(),
                                    productTypeId:$("#productTypeId").val(),
                                    productAttrId:$("#productAttrId").val()
                                };
                            }
                        }
                    }
                },
                sort: {
                    validators: {
                        notEmpty: {message: "排序号不可为空"},
                        stringLength: {max: 4,message: "排序号最大长度为4"},
                        numeric: {
                            message: '排序号只能输入数字'
                        }
                    }
                }

            }
        });
    }

    var itemIndex = 0;/**初始化动态添加属性值的下标值**/
    /**
     * 添加属性信息
     */
    <shiro:hasPermission name="back_gotoProductAttributePage_add">
    function addInfo(){
        itemIndex = 0;/**将动态添加属性值的下标值置0**/
        $("#myModalLabel").empty().text("添加属性信息");
        var productTypeId = $("#q_productTypeId").val();
        getProductTypeName(productTypeId);
        $("#productTypeId").val(productTypeId);
        /**清空隐藏域的值**/
        $("#productAttrId").val("");/**属性id**/
        $(".addAttrValue").remove();/**添加属性值**/
        $("#isListShow_1").attr("disabled","disabled");
        /**清空表单控件中值**/
        resetAddForm();
    }
    </shiro:hasPermission>

    function getProductTypeName(id){
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "${basePath}/back/productParameter/getProductParameterInfo.sjson",
            data: {productTypeId:id},
            success: function(result){
                var data = JSON.parse(result.data);
                var shopProductType =data.shopProductType;
                $("#productTypeName").html(shopProductType.sortName);
            }
        });
    }

    /**
     * 编辑属性信息
     */
    <shiro:hasPermission name="back_gotoProductAttributePage_update">
    function editInfo(){
        $("#myModalLabel").empty().text("修改属性信息");
        $("#isListShow_1").removeAttr("disabled");
        $("#isListShow_0").removeAttr("checked");
        /**获取选中行的id**/
        var selectedRow= $("#tt").bootstrapTable('getSelections');
        if(selectedRow.length==1){
            var id=selectedRow[0].productAttrId;
            $("#btn_edit").attr("data-target","#addOrEditModal");/**选中了记录后才可打开对应的模态框**/
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url: "${basePath}/back/productAttribute/getProductAttributeInfo.sjson",
                data: {productAttrId:id},
                success: function(result){
                    var data = JSON.parse(result.data);
                    itemIndex = 0;/**将动态添加属性值的下标值置0**/
                    var shopProductType =data.shopProductType;
                    $("#productTypeName").html(shopProductType.sortName);
                    $("#attributeValueCount").val(data.attributeValueCount);
                    var productAttr =data.shopProductAttribute;
                    $("#name").val(productAttr.name);
                    $("#productAttributeName").val(productAttr.name);
                    $("#sort").val(productAttr.sort);
                    $("#productTypeId").val(productAttr.productTypeId);
                    $("#productAttrId").val(productAttr.productAttrId);
                    $("#isListShow").val(productAttr.isListShow);
                    $("#isListShow_"+productAttr.isListShow).attr("checked",true);
                    initAttributeValue(data.attributeValueList);
                }
            });
        }else{
            $("#btn_edit").attr("data-target","");/**没有选中记录不可打开模态框**/
            showMsg("请选择一行记录！");
        }
    }
    </shiro:hasPermission>

    function addAttrValue(){
        var html = "<tr class='addAttrValue'>"+
            "<td align='center'><div class='form-group'><input id='sortValue"+itemIndex+"' type='text' name='shopProductAttributeValueList["+itemIndex+"].sort' class='form-control input-sm {validate:{required:true,digits:true}} attrValueSort' style='width:50px;' value='"+getMaxSortNum('attrValueSort')+"'/></div></td>"+
            "<td colspan='2' align='center'><div class='form-group'><input id='attrValueName"+itemIndex+"' type='text' name='shopProductAttributeValueList["+itemIndex+"].attrValueName' class='form-control input-sm {validate:{required:true}}' value=''/></div></td>"+
            "<td align='center'><a onclick='remove_tr($(this),null);' href='javascript:'>移除</a></td>"+
            "</tr>";
        $('#tr_model > tr:last').after(html);
        itemIndex++;
    }

    /**移除文本**/
    function remove_tr(o,attributeValueId){
        if(attributeValueId!=null){
            $.ajax({
                type: "POST",dataType: "JSON",
                url: "${basePath}/back/productAttribute/deleteAttributeValues.sjson",
                data: {attributeValueId:attributeValueId},
                success: function(data){
                    if(data.success==true){
                        o.parents('tr:first').remove();
                        showMsg("移除成功！");
                    }else{
                        showMsg("移除失败！");
                    }
                }
            });
        }else{
            o.parents('tr:first').remove();
        }
    }
    /**初始化属性值**/
    function initAttributeValue(attributeValueList){
        $(".addAttrValue").remove();
        if(attributeValueList!=null){
            for(var i=0;i<attributeValueList.length;i++){
                var html = "<tr class='addAttrValue'>"+
                    "<td align='center'><div class='form-group'><input id='sortValue"+itemIndex+"' type='text' name='shopProductAttributeValueList["+itemIndex+"].sort' class='form-control input-sm {validate:{required:true,digits:true}} attrValueSort' value='"+attributeValueList[i].sort+"' style='width:50px;'/></div></td>"+
                    "<td  colspan='2' align='center'><input id='attrValueId"+itemIndex+"' name='shopProductAttributeValueList["+itemIndex+"].attrValueId' type='hidden' value='"+attributeValueList[i].attrValueId+"'/><div class='form-group'><input class='form-control input-sm {validate:{required:true}}' id='nameValue"+itemIndex+"' type='text' name='shopProductAttributeValueList["+itemIndex+"].attrValueName' value='"+attributeValueList[i].attrValueName+"'/></div></td>"+
                    "<td align='center'><a onclick='remove_tr($(this),"+attributeValueList[i].attrValueId+");' href='javascript:'>移除</a></td>"+
                    "</tr>";
                $('#tr_model > tr:last').after(html);
                itemIndex++;
            }
        }
    }

    function checkAttrValueCount(){
        var count = $("#attributeValueCount").val();
        if(Number(count)==0){/**没有对应的属性值**/
            showMsg("系统提示：请先给当前属性添加属性值后，再设置显示!");
            $("#isListShow_0").attr("checked",true);
        }
    }

</script>

<!--添加编辑模态框（Modal） -->
<div class="modal fade" id="addOrEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" style="width:70%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h5 class="modal-title" id="myModalLabel"></h5>
            </div>
            <div class="modal-body">
                <form id="form1"  method="post" action="${basePath}/back/productAttribute/saveOrUpdateProductAttr.sjson">
                    <input id="productTypeId" type="hidden" name="productTypeId" noclear="true" />
                    <input id="productAttrId" type="hidden" name="productAttrId" />

                    <table align="center" class="addOrEditTable table-bordered table" style="width:100%;">

                        <tr>
                            <td class="titlebg"colspan="4" style="font-weight:bold;text-align: center;">属性信息</td>
                        </tr>
                        <tr>
                            <td class="toright_td" width="150px"><span style="color:red">* </span> 所属分类:&nbsp;&nbsp;</td>
                            <td  class="toleft_td" colspan="3">
                                <div class="form-group">
                                    <span id="productTypeName"></span>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="toright_td" width="150px"><span style="color:red">* </span>属性名称:&nbsp;&nbsp;</td>
                            <td  class="toleft_td" colspan="3">
                                <div class="form-group">
                                    <input id="name" class="form-control input-sm" type="text" name="name" placeholder="请输入属性名称"/>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="toright_td" width="150px"><span style="color:red">* </span> 排序号:&nbsp;&nbsp;</td>
                            <td  class="toleft_td" colspan="3">
                                <div class="form-group">
                                    <input id="sort" class="form-control input-sm" type="text" name="sort" placeholder="请输入排序号"/>
                                </div>
                            </td>
                        </tr>

                        <tr>
                        <td class="toright_td"  width="150px"><span style="color:red">* </span>是否显示：</td>
                        <td class="toleft_td" colspan="3">
                            &nbsp;<input id="isListShow_0" name="isListShow" checked="checked"  type="radio" value="0"/>未显示&nbsp;&nbsp;&nbsp;
                            <input id="isListShow_1"  type="radio" name="isListShow" onclick="checkAttrValueCount();" disabled="disabled" value="1"/>已显示</td>
                        </tr>
                        <tr>
                            <td colspan="4" class="titlebg" style="font-weight:bold;text-align: center;">添加属性值</td>
                        </tr>
                        <tr class="titlebg">
                            <td  width="20%"  style="font-weight:bold;text-align: center;"><span style="color:red">* </span>排序号</td>
                            <td  width="40%" colspan="2"  style="font-weight:bold;text-align: center;"><span style="color:red">* </span>属性值</td>
                            <td  width="30%"  style="font-weight:bold;text-align: center;"><a class="btn-add marginleft" id="add_type" href="javascript:addAttrValue();"> <span>添加属性值</span> </a></td>
                        </tr>
                        <tbody id="tr_model">
                        <tr id="0"></tr>
                        </tbody>

                    </table>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="validateBtn" class="btn btn-primary"  onclick="submitFormByRemote()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>